<template>
    <div class="purchase">
        <div class="box" style="text-align: center">
        <el-transfer
            class="transfer"
            style="text-align: left; display: inline-block"
            v-model="right"
            filterable
            :left-default-checked="[]"
            :right-default-checked="[]"
            :titles="['商品列表', '购物车']"
            :props="{
                key: 'id',
                label: 'name',
                disabled:'disabled',
                }"
            :format="{
            noChecked: '${total}',
            hasChecked: '${checked}/${total}'
            }"
            @change="handleChange"
            @left-check-change="leftChange()"
            :data="data">
            <div slot-scope="{ option }" @click="clickMe(option.id)" class="products">
                <img :src="option.image" alt="" style="height: 100px;">
                <div class="info">
                    {{ option.name }} <br>
                    剩余数量：{{ option.productNum }} <br>
                    价格： {{ option.price }}元
                </div>
            </div>
            <el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button>
            <el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button>
            <el-button class="transfer-footer" slot="right-footer" size="small" @click="clean()">清空</el-button>
        </el-transfer>
        </div>
    </div>
</template>
  
<script>
import {inventoryPage2} from '@/api/inventory'
export default {
    data() {
    return {
        data: [],
        left: [1],
        right: [1],
        
    };
    },
    created(){
        this.init()
    },
    methods: {
    init(){
        let storeId = this.$store.state.user.userInfo.storeId == 0 ? '' : this.$store.state.user.userInfo.storeId
        inventoryPage2('',1,999999,'','','',storeId,1).then((res)=>{
            this.data = res.data.records
            console.log(res.data)
        })
    },
    handleChange(left, direction, movedKeys) {
        //value：右边的值
        //direction：移动方向
        //movedKeys:需要移动的元素
        console.log(left, direction, movedKeys);
    },
    clickMe(value){
        console.log(value)
        let newValue = JSON.parse(JSON.stringify(value))
        
        this.right.push(newValue)
        this.left.push(value)
        console.log(this.left)
        console.log(this.right)
    },
    clean(){
        this.right = []
    },
    leftChange(){
        console.log(11111)
    }
    }
};
</script>

<style scoped>
.transfer-footer {
    margin-left: 20px;
    padding: 6px 5px;
}
.purchase{
    line-height: 20px;
}

.transfer{
    display: flex;
}

::v-deep .box .el-transfer__buttons{
    display: none;
}

::v-deep .box .el-checkbox__input{
    display: none;
}


::v-deep .box .el-transfer-panel{
    height: 750px;
    width: 610px;
    margin: 10px;
}

::v-deep .box .el-transfer-panel__list.is-filterable{
    height: 750px;
    width: 600px;
}
::v-deep .box .el-transfer-panel__item{
    height: 180px;
    display: block;

}
.products{
    height: 180px;
    width: 100px;
    /* border-style: solid;
    border-color: darkgray ; */
}
.info{
    font-size: 12px;
    line-height: 15px;
    color: gray;

    text-align: center;
}
</style>